<!--
 * @Author: fangshengchu
 * @Date: 2024-05-07 13:59:58
 * @LastEditTime: 2024-06-06 11:11:57
 * @LastEditors: fangshengchu
 * @Description: 
 * @FilePath: \szhk-fe\src\views\purchaseArrival\goodsInformationUpload\index.vue
-->
<template>
  <a-layout class="page-main h100">
    <a-layout-content>
      <query-page
        ref="queryPageRef"
        v-model:selectedKeys="selectedKeys"
        title="机载产品物品码信息上传"
        height="100%"
        :form-component-config="formComponentConfig"
        :form-render-config="formRenderConfig"
        :form-render-keys="formRenderKeys"
        :table-component-config="tableComponentConfig"
        :table-render-config="tableRenderConfig"
        :table-render-keys="tableRenderKeys"
        :loading="isLoading"
        :data="renderData"
        :total="tableTotal"
        @selection-change="selectionChange"
        @query-data="getData"
      >
        <template #operate="{ record, rowIndex }">
          <a-button type="text" @click="handelDetail(record, rowIndex)"
            >详情</a-button
          >
        </template>
      </query-page>
    </a-layout-content>
    <a-layout-footer v-permission="['pms:dcd-item:fileUpload']">
      <div class="upload">
        <div class="upload-title">DCD物料信息上传</div>
        <!-- <div class="tip">支持pdf、word等文件格式</div> -->
        <a-upload
          ref="uploadRef"
          :custom-request="customRequest"
          @change="onChange"
        >
          <template #upload-button>
            <a-space>
              <a-button>选择文件</a-button>
            </a-space>
          </template>
        </a-upload>
      </div>
    </a-layout-footer>
    <DetailModal
      v-if="detailModalVisible"
      v-model="detailModalVisible"
      :select-id="selectId"
    ></DetailModal>
  </a-layout>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import {
    getPmsDcdItemPage,
    uploadFile,
  } from '@/api/purchaseArrival/goodsInformationUpload';
  import { Modal } from '@arco-design/web-vue';
  import DetailModal from './DetailModal.vue';
  import {
    formComponentConfig,
    formRenderConfig,
  } from '../moduleCommon/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../moduleCommon/tableComp/baseTableConfig';

  // 当前页面要渲染的查询条件
  const formRenderKeys = [
    'matecode',
    'modelnumber',
    'createTimeStart',
    'createTimeEnd',
    'supplierProd',
    'suppliernameProd',
  ];
  // 当前表格要渲染哪些值
  const tableRenderKeys = [
    'index',
    'secretLevel',
    'fileCode',
    'matecode',
    'prodState',
    'chinesename',
    'foreigname',
    'managetype1',
    'managetype2',
    'managetype3',
    'modelnumber',
    'modeldepartname',
    'modeldepart',
    'figurenumber',
    'mainfunction',
    'mainparameter',
    'lifetimeProd',
    'oneweight',
    'cubesize',
    'storagecode',
    'preservationlife',
    'serviceability',
    'servicecode',
    'appliancecode',
    'airplanetype2',
    'ofsystem',
    'ofcomposition',
    'supplierProd',
    'suppliernameProd',
    'makedCountry',
    'addcondition',
    'secretRank2',
    'componentcode',
    'qualitycode',
    'symmetry',
    'belongfigure',
    'materialcode',
    'materialstandard',
    'assemblerequire',
    'createTime',
    'creator',
    'operate',
  ];

  const isLoading = ref(true);
  const queryPageRef = ref(null);
  const renderData = ref<any[]>([]);
  const selectedKeys = ref(['id-1']);
  const tableTotal = ref(0);
  const selectId = ref(null);

  const getData = async (queryInfo: object) => {
    if (!queryInfo) {
      queryInfo = queryPageRef.value.getStatus();
    }
    isLoading.value = true;
    const { data } = await getPmsDcdItemPage(queryInfo);
    renderData.value = data.list;
    tableTotal.value = data.total;
    isLoading.value = false;
  };
  const detailModalVisible = ref(false);
  const handelDetail = (row) => {
    selectId.value = row.supplierProd;
    detailModalVisible.value = true;
  };
  const uploadRef = ref(null);
  const customRequest = async (option) => {
    const { fileItem, name } = option;
    const formData = new FormData();
    formData.append(name || 'file', fileItem.file);
    const { data } = await uploadFile(formData, {});
    Modal.success({
      title: '上传成功',
      content: data,
      okText: '确认',
    });
    getData();
  };
</script>

<style lang="less" scoped>
  @import url('../moduleCommon/common.less');
</style>
